<h1>保存</h1>

<ng-container *ngIf="ms.kongregate">
  <clr-alert [clrAlertClosable]="false" [clrAlertType]="'alert-warning'">
    <div clr-alert-item class="alert-item">
      <span class="alert-text">
        云存储是实验性的!建议导出备份。
      </span>
    </div>
  </clr-alert>
  <br />
</ng-container>

<div class="btn-group btn-primary">
  <button class="btn btn-success" (click)="ms.save()">
    <clr-icon shape="floppy"></clr-icon>
    保存
  </button>
  <button class="btn" (click)="ms.load()">
    <clr-icon shape="install"></clr-icon>
    加载
  </button>
  <button class="btn btn-danger" (click)="clearModal = true">
    <clr-icon shape="uninstall"></clr-icon>
    清除
  </button>
  <button class="btn btn-success" (click)="submit()" *ngIf="ms.kongregate">
    <clr-icon shape="sync"></clr-icon>
    Submit Score
  </button>
</div>

<div class="btn-group btn-primary" *ngIf="ms.kongregate">
  <button class="btn btn-info" (click)="ms.playFabLogin()">
    <clr-icon shape="user"></clr-icon>
    Log PlayFab
  </button>
  <button
    *ngIf="ms.playFabLogged"
    class="btn btn-success"
    (click)="ms.save(false, true)"
  >
    <clr-icon shape="upload-cloud"></clr-icon>
    云存储
  </button>
  <button *ngIf="ms.playFabLogged" class="btn" (click)="ms.loadPlayFab()">
    <clr-icon shape="download-cloud"></clr-icon>
    云加载
  </button>
</div>
<br />
<h3>自动保存</h3>
<div class="btn-group">
  <div class="radio btn">
    <input
      type="radio"
      name="btn-save-radios"
      id="btn-demo-radio-1"
      value="off"
      (change)="changeAutoSave()"
      [(ngModel)]="os.autoSave"
    />
    <label for="btn-demo-radio-1">关闭</label>
  </div>
  <div class="radio btn">
    <input
      type="radio"
      name="btn-save-radios"
      id="btn-demo-radio-2"
      value="1"
      (change)="changeAutoSave()"
      [(ngModel)]="os.autoSave"
    />
    <label for="btn-demo-radio-2">1 分钟</label>
  </div>
  <div class="radio btn">
    <input
      type="radio"
      name="btn-save-radios"
      id="btn-demo-radio-3"
      value="3"
      (change)="changeAutoSave()"
      [(ngModel)]="os.autoSave"
    />
    <label for="btn-demo-radio-3">3 分钟</label>
  </div>
  <div class="radio btn">
    <input
      type="radio"
      name="btn-save-radios"
      id="btn-demo-radio-4"
      value="5"
      (change)="changeAutoSave()"
      [(ngModel)]="os.autoSave"
    />
    <label for="btn-demo-radio-4">5 分钟</label>
  </div>
</div>

<div class="toggle-switch" *ngIf="ms.playFabLogged">
  <input type="checkbox" id="autoPlayFab" [(ngModel)]="os.playFabAutoSave" />
  <label for="autoPlayFab">每隔20 分钟自动保存到 PlayFab (测试中)</label>
</div>

<p>
  上次本地保存: {{ ms.lastSave | date: "medium" }}
  <span *ngIf="ms.lastPlayFabSave > 0"
    >上次 PlayFab 保存:
    {{ ms.lastPlayFabSave | date: "medium" }}
  </span>
</p>
<h2>导出 / 导入存档</h2>
<textarea name="raw" [(ngModel)]="exp" rows="3"></textarea>
<div class="btn-group btn-primary">
  <button class="btn btn-success" (click)="export()">
    <clr-icon shape="export"></clr-icon>
    导出
  </button>
  <button class="btn" (click)="import()">
    <clr-icon shape="import"></clr-icon>
    导入
  </button>
</div>
<h2>自动保存设置</h2>
<div class="toggle-switch">
  <input type="checkbox" id="t1" [(ngModel)]="os.autosaveNotification" />
  <label for="t1">自动保存通知</label>
</div>

<clr-modal [(clrModalOpen)]="clearModal">
  <h3 class="modal-title">Clear</h3>
  <div class="modal-body">
    <p>您确定要删除所有游戏进度吗?</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="clearModal = false">
      取消
    </button>
    <button
      type="button"
      class="btn btn-danger"
      (click)="ms.clear(); clearModal = false"
    >
      确认清除
    </button>
  </div>
</clr-modal>
